<template>
  <div class="common-layout main-layout-all-height">
    <el-container class="main-layout-all-height">
      <el-aside class="aside-layout">
        <el-menu default-active="0" class="main-layout-all-height">
          <h2 class="mb-2">管理目录</h2>
          <el-menu-item index="1" @click="showView('/userLogin')">
            <el-icon></el-icon>
            <span>用户登录记录</span>
          </el-menu-item>
          <el-menu-item index="2" @click="showView('/user')">
            <el-icon></el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="3" @click="showView('/role')">
            <el-icon></el-icon>
            <span>角色管理</span>
          </el-menu-item>
          <el-menu-item index="4" @click="showView('/userRole')">
            <el-icon></el-icon>
            <span>用户角色管理</span>
          </el-menu-item>
          <el-menu-item index="5" @click="showView('/permission')">
            <el-icon></el-icon>
            <span>权限管理</span>
          </el-menu-item>
          <el-menu-item index="6" @click="showView('/requestPath')">
            <el-icon></el-icon>
            <span>请求路径管理</span>
          </el-menu-item>
          <el-menu-item index="7" @click="showView('/reqPathPermission')">
            <el-icon></el-icon>
            <span>请求路径权限管理</span>
          </el-menu-item>
          <el-menu-item index="8" @click="showView('/rolePermission')">
            <el-icon></el-icon>
            <span>角色权限管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>


      <el-container>
        <!--        <el-header>欢迎来到管理页面</el-header>-->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import {useRouter} from 'vue-router'

  export default {
    name: 'AdminMain',
    components: {},
    setup() {
      const router = useRouter()
      const currentPath = '/admin/main'
      const showView = (path) => {
        router.push(currentPath + path)
      }

      return {
        showView
      }
    },
  }
</script>

<style scoped>
  .aside-layout {
    width: 14%;
    min-width: 160px;
    max-width: 200px;
  }

  .main-layout-all-height {
    height: 100vh;
  }
</style>